﻿<template>
  <!-- swiper -->
  <div class="swiper_cover">
      <swiper :options="swiperOption">
        <swiper-slide class="box" style="margin-left:1vw;opacity:0;">
        </swiper-slide>
        <swiper-slide v-for="(box , index) in slider_list">
          <!--v-for="box in card_mess"-->

          <!-- box s -->
          <div class="box"   ref="box"  style="margin-right:6px;" v-on:click.self="goto_box(box.id,index)">
            <img v-bind:src="box.image|ad_user_img_f" class="box_header_img" v-on:click.self="goto_box(box.id,index)" />
            <div class="box_list_title" v-on:click.self="goto_box(box.id,index)">
              {{box.title}}
            </div>
            <div class="box_list_qus" v-on:click.self="goto_box(box.id,index)">
              {{box.trialQuestion}}
            </div>
          </div>
          <!-- box e -->

        </swiper-slide>
        <swiper-slide class="box" style="opacity:0;">
        </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
  </div>
</template>
<script>
  import 'swiper/dist/css/swiper.css'
  import common from "../../common/common.js"
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import { Toast, Indicator } from 'mint-ui';
  import "../../filter/filter.js";
  var qs = require('qs');

  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    data() {
      return {
        swiperOption: {
          slidesPerView: 3,
          spaceBetween: 20,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          onSlideChangeEnd: (swiper) => {
            let id = this.slider_list[swiper.activeIndex].character
//            console.log("change__________________S")
//            console.log(id)
            this.change_get_mess(id)
          },
        },
        slider_list: [{}, {}, {}, {}],
      }
    },
    methods:{
      change_get_mess: function (id) {
        //this.$emit('get_data_scroll',id)
      },
      goto_box: function (id) {
        return;
        Indicator.open();
        //当前显示的id
//        sessionStorage.setItem("nav_id", id);
        //现在的冒险卡
//        sessionStorage.setItem("now_List", JSON.stringify(this.msg));
//        this.$store.dispatch("thom_redirect",
//          { name: "/Adventure_visit", router: this.$router });
        this.$emit("slider_box_click",id,this.msg,this.index)
      },
    },
    mounted: function () {
      this.slider_list = this.msg;
      //console.log("mmmmmmmmmmmmmmmmmmmmmmmmmmmmmm");
      //console.log(this.msg[0]);
      //console.log(this.header_sel);
      //this.$emit('get_data_scroll', this.msg[0].character);
    },
    props: ["msg","header_sel","index"],
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style scoped>
  .base_move_r {
    position: relative;
    width: 20vw;
    height: 100%;
    right: 0;
    top: 0;
    background: -webkit-linear-gradient(right, #b0b0b0, rgba(0,0,0,0));
    /*background: linear-gradient(right left, black, rgba(0,0,0,0.2));*/
  }

  .base_move_l {
    position: relative;
    width: 20vw;
    height: 100%;
    left: 0;
    top: 0;
    background: -webkit-linear-gradient(left, #b0b0b0, rgba(0, 0, 0, 0))
    /*background: linear-gradient(left right, black, rgba(0,0,0,0.2));*/
  }

  .warp_circle {
    position: relative;
    border: 1vw solid #987d7d;
    width: 16vw;
    height: 16vw;
    margin: 0;
    border-radius: 50%;
    margin-top: 11vw;
  }

  #demo12 {
    position: absolute;
    top: 26%;
    left: 53%;
    transform: translate(-50%,-50%);
    display: inline-block;
    margin: 0px;
    border-right: 2vw solid;
    border-bottom: 2vw solid;
    width: 6vw;
    height: 6vw;
    color: #987d7d;
    transform: rotate(-45deg) translate(-50%,-50%);
  }

  #demo13 {
    position: absolute;
    top: 60%;
    left: 36%;
    display: inline-block;
    transform: translate(-50%,-50%);
    margin: 0px;
    border-left: 2vw solid;
    border-bottom: 2vw solid;
    width: 6vw;
    height: 6vw;
    color: #987d7d;
    transform: rotate(45deg) translate(-50%,-50%);
  }

  .box_list_title {
    height: 4vw;
    line-height: 4vw;
    font-weight: 600;
  }

  .box_list_qus {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 4vw;
    margin-top: 2vw;
  }
  /*box_header_img s*/

  .box_header_img {
    display: block;
    height: 25vw;
    border-radius: 1vw 1vw 0 0;
  }

  .card_header {
    margin-top: 4vw;
  }

  .card_wrapper_box {
    margin-top: 4vw;
  }

  .box_header_img {
    width: 100%;
  }
  /*box_header_img e*/
  .wrapper_c {
    position: relative;
  }

  .move_l img {
    width: 4vw;
    display: block
  }

  .move_r img {
    width: 4vw;
    display: block
  }

  .move_l {
    position: absolute;
    /*left: -6vw;*/
    font-size: 50px;
    color: #333;
    z-index: 100;
    /*top:14vw;*/
  }

  .move_r {
    /*right:-6vw;*/
    position: absolute;
    font-size: 50px;
    color: #333;
    z-index: 50;
    /*top:14vw;*/
  }

  .wapper_lsit {
    height: 100%;
    white-space: nowrap;
    float: left;
    overflow: hidden;
  }

  .wrapper {
    width: 85vw;
    background-color: #fff;
    height: 44vw;
    overflow: hidden;
    padding-top: 2.6vw;
  }

  .box {
    font-size: 3vw;
    border: 1px solid #9f5c2f;
    border-radius: 1vw;
    float: left;
    width: 26vw;
    height: 37vw;
    margin-top: 0.4rem;
    /*border:2px solid #ff6a00;*/
    background-color: #fff;
    white-space: normal;
    position: relative;
    /*margin-right:2vw;*/
  }
  .swiper-slide-next .box {
    width: 30vw;
    //height:100%;
    height: 40vw;
    margin-top: 0;
    transform: translateX(-6%);
  }
  .box_act {
    margin-top: 0;
    width: 30vw;
    //height:100%;
    height: 40vw;
  }

  .card_wrapper {
    overflow: hidden;
  }
</style>
